Get Request

קבלת כל ה-items

פונקציית get מביאה מידע מתוך ה-DB.

נגדיר את מבנה הפוסטים שלנו:

post.model.ts

export interface Post{
    id: number,
    title: string,
    content: string
}

נקרא לפונקציית ה-get שמביאה את כל הפוסטים הקיימים דרך ה-service. הפונקציה מחזירה לנו מערך של אובייקטים מסוג Post.

posts.service.ts

baseUrl = 'http://localhost:3000'

constructor(private http: HttpClient){}

createPost(post: Post){
    return this.http.post(`${baseUrl}/posts`, post);
}

getPosts(): Observable<Post[]>{
    return this.http.get<Post[]>(`${baseUrl}/posts`);
}

בקומפוננטה, כדי לטעון את המידע כשהדף נטען, נקרא לפונקציית ה-get מתוך ngOnInit.

app.component.ts

constructor(private postsService: PostsService){}

posts: Posts[];

ngOnInit(){
    postsService.getPosts().subscribe(posts => {
        this.posts = posts;
    });
}

אחרי שיש לנו את המידע אפשר להציג אותו בדף.

app.component.html

<h3>All Posts</h3>
<table>
    <tr>
        <th>Title</th>
        <th>Content</th>
    </tr>

    <tr *ngFor="let post of posts">
        <td>
            {{ post.title }}
        </td>
        <td>
            {{ post.content }}
        </td>
    </tr>
</table>

קבלת item אחד

אם אנחנו רוצים לקבל מידע על פוסט בודד, אנחנו צריכים לשלוח את הקוד של הפוסט ל-DB. את הקוד של הפוסט אפשר לשלוח דרך ה-url של הפוסט. עוד בנושא יש בחלק שמדבר על של routes.

posts.service.ts

baseUrl = 'http://localhost:3000'

constructor(private http: HttpClient){}

createPost(post: Post){
    return this.http.post(`${baseUrl}/posts`, post);
}

getPosts(): Observable<Post[]>{
    return this.http.get<Post[]>(`${baseUrl}/posts`);
}

getPost(id: number): Observable<Post>{
    return this.http.get<Post>(`${baseUrl}/posts/${id}`);
}

לשים לב

ללא קריאה ל-subscribe לא תהיה קריאה לפונקציית ה-get.